<template>
	<div class="login_box" >
		<div class="left_login">
			<div class="logo_box">
				 <img src="@/assets/image/login/logo.png" alt="" height="50">
			</div>
			<div class="login">
				<h3>欢迎使用</h3>
				<h3>脑功能多维评估训练系统</h3>
				<p class="bottm_back"></p>
				<a-form :model="formState" @finish="handleFinish">
					<a-form-item>
					    <a-input v-model:value="formState.account" placeholder="用户名">
					        <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
					    </a-input>
					</a-form-item>
					<a-form-item>
					    <a-input v-model:value="formState.password" type="password" placeholder="密码">
					        <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
					    </a-input>
					</a-form-item>
					<a-form-item>
						<MyButton class="primary" title="登录" :disabled="formState.account === '' || formState.password === ''"
							html-type="submit"
						/>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
   import { ref,onMounted } from 'vue';
   import { useWorkBenches, useWebstock } from '@/store';
   import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
   import { login } from "@/api/login";
   import {useRouter,useRoute} from 'vue-router';

   const ROUTER = useRouter();
   const formState = ref<any>({ account:'', password:'' });

   const handleFinish = async () => {
        const res = await login(formState.value);
		if (!res) return;
		localStorage.setItem('token', res);
		ROUTER.replace({path: '/workbenches'});
    };

	onMounted(()=>{
		useWebstock().webSocketClose();
	});
</script>

<style lang="less" scoped>
	.login_box{
		background-image: url("../../assets/image/login/back.png");
		 background-size:  100%;
		//background-size: contain;
		background-position: right;
		background-repeat: no-repeat;
		width:100vw;
		height: 100vh;
		display: flex;
		.left_login{
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			padding: 20px;
			.login{
				height: 50%;
				width: 300px;
        padding:10px;
				margin-top: 10%;
				margin-left: 20%;
        background-image: url("../../assets/image/login/formBack.png");
        background-size:100%  99.9%;
				h3{
					font-size: 24px;
					font-weight: 600;
				}
				.bottm_back{
					background: #3DACCB;
					width: 36px;
					height: 4px;
					margin: 10px 0 20px 0;
				}
			}
		}
	}

	.ant-form .ant-form-item{
		margin-bottom: 10px;
	}

	.primary{
		width: 100%;
	}

	.ant-input-affix-wrapper{
		height: 49px;
		border: 1px solid #98A2B3;
    border-radius:8px;
	}
</style>
